<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情页面 - 验证API </title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/jq3.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/mui.js"></script>
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />

		<style type="text/css">
			#save {
				position: fixed;
				right: 8px;
				bottom: 40px;
				/* width: 5rem;
			height: 5rem; */
				text-align: center;
				opacity: 0.8;
				box-sizing: border-box;
				border: 4px solid red;
				border-radius: 50%;
			}

			#save222 {
				position: fixed;
				right: 8px;
				bottom: 80px;
				/* width: 5rem;
				height: 5rem; */
				text-align: center;
				opacity: 0.8;
				box-sizing: border-box;
				border: 4px solid red;
				border-radius: 50%;
			}
		</style>

	</head>
	<body>

		<br>

		<ul class="mui-table-view">
			<li class="mui-table-view-cell" onclick="getLocation()">
				<a class="mui-navigate-right">当前位置</a>
				<input id="locationText" type="text" class="mui-text-center">

			</li>

			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">写说说</a>
				<div style="width: 100%; padding: 0.5rem;">

					<textarea rows="3" cols="" style="width: 100%; " id="contentText"></textarea>
				</div>
			</li>
			<li class="mui-table-view-cell" onclick="takePIC()">
				<a class="mui-navigate-right">拍照</a>

			</li>
		</ul>

		<div style="width: 100%; padding-left: 0.5rem;">
			<img id="xxxxxff" style="width: 50%; height: auto; margin: 0px auto; display: block;" src="">
		</div>

		<!--/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/cameraxxx/1592361983487.jpg-->


		<button type="button" class="mui-btn mui-btn-warning" id="save">提交</button>
		<button type="button" class="mui-btn mui-btn-warning" id="save222">测试数据库</button>

	</body>
</html>

<script type="text/javascript" src="../js/dbManager.js"></script>

<script type="text/javascript">
	document.addEventListener('plusready', function() {
		// 

	}, false);



	// 点击定位按钮
	function getLocation() {
		plus.geolocation.getCurrentPosition((pos) => {
			// console.info("获取用户位置成功------->" + JSON.stringify(pos));
			$("#locationText").val(pos.addresses);

		}, (error) => {
			console.info(error.message)
		}, {
			enableHighAccuracy: false // 是否采用高精度定位, 默认false
		})
	}

	function takePIC() {
		// 1. 获取摄像头对象
		// 2. 摄像头对象执行方法( 拍照, 录像, 停止录像)
		let cam = plus.camera.getCamera();
		if (!cam) {
			return;
		}
		var fn = "_doc/cameraxxx/" + new Date().getTime() + ".jpg";
		cam.captureImage(function(capturedFile) {

			plus.io.resolveLocalFileSystemURL(capturedFile, (res) => {
				$("#xxxxxff")[0].src = res.fullPath;
			}, (err) => {});
		}, function(error) {
			console.info(error.message);
		}, {
			filename: fn
		});
	}

	var _locked = false;
	$("#save").click(function() {
		if (_locked) {
			return;
		}
		let trip = {};

		trip.id = new Date().getTime(); // 保存日期
		trip.content = $("#contentText").val().trim(); // 文字输入的内容
		trip.location = $("#locationText").val().trim();
		trip.pic = $("#xxxxxff").attr("src");
		if (trip.pic) {
			trip.pic = trip.pic.replace("/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/cameraxxx/", "");
		}
		for (var x in trip) {
			if (!trip[x]) {
				mui.toast('数据不完整, 请重填', {
					duration: 'short',
					type: 'div'
				});
				return;
			}
		}

		// 保存这条数据
		var ok = DBmanager.createTrip(trip);
		if (ok) {
			$("#contentText").val("");
			$("#locationText").val("");
			$("#xxxxxff").attr("src", "");
		}

	});

	// 测试代码
	$("#save222").click(function() {
		console.info("测试数据库");
		DBmanager.openDb();

		plus.sqlite.selectSql({
			name: DBmanager.name,
			sql: "select * from  trips",
			success: function(res) {
				console.info(JSON.stringify(res))
			},
			fail: function(err) {
				console.info(err.message)
			}
		});

	});
</script>
